<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://cn.vuejs.org/v2/guide/conditional.html</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div class="container" id="box">
    <div class="col-lg-12">
        <h2 v-if="ok">FUCK!</h2>
        <h2 v-else>FUCK Y!</h2>
        <h2 v-if="no">FUCK YOU!</h2>
    </div>
    <div class="col-lg-12">
        <template v-if="ok">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>
    </div>
    <div class="col-lg-12">
        <div v-if="random > 0.5">
            Now you see me --->{{random}}
        </div>
        <div v-else>
            Now you don't ---> {{random}}
        </div>
    </div>
    <div class="col-lg-12">
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
    </div>

    <div class="col-lg-12">
        <div class="form-group" v-if="input">
            <label class="text-info" for="username">UserName</label>
            <input id="username" placeholder="Enter your username" class="form-control" type="text"
                   v-model="logotype" key="u">
        </div>
        <div class="form-group" v-else>
            <label class="text-info" for="email">Email</label>
            <input id="email" placeholder="Enter your email address" class="form-control" type="email"
                   v-model="logotype" key="e">
        </div>
        <div class="form-group">
            <button class="form-control btn btn-info" v-on:click="change">切换</button>
        </div>
    </div>

    <div class="col-lg-12">
        <template v-if="input">
            <div class="form-group">
                <label class="text-info">Username</label>
                <input class="form-control" placeholder="Enter your username" key="username-input">
            </div>
        </template>
        <template v-else>
            <div class="form-group">
                <label class="text-info">Email</label>
                <input class="form-control" placeholder="Enter your email address" key="email-input">
            </div>
        </template>
        <div class="form-group">
            <button class="form-control btn btn-outline-danger" v-on:click="change">Change</button>
        </div>
    </div>
    <div class="col-lg-12">
        <h1 v-show="ok">Hello!</h1>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {
            ok: true,
            no: false,
            random: Math.random(),
            type: ["A", "B", "C", "D"][Math.floor(Math.random() * 10) % 4],
            input: true,
            logotype: ""
        },
        methods: {
            change: function () {
                this.input = !this.input
            }
        }
    });
</script>